<template>
    <div class="qilin-QilinExplain qilin-mb-4 qilin-panel qilin-shadow qilin-radius-default">
        <div class="qilin-QilinExplain-header qilin-p-2">
            <span>{{propsValue.title}}</span>
        </div>
        <div class="qilin-QilinExplain-content qilin-px-2 qilin-py-4">
            <slot name="content"></slot>
        </div>
        <div class="qilin-QilinExplain-footer qilin-p-2">
            <span>创建于：{{getDate}}</span>
        </div>
    </div>
</template>

<script setup>
import Qilin from "qilin-utils";

/*
    数据变量定义区域
*/
// 接收父组件传来的值--父组件定义的配置项建议放在脚本逻辑最下方
const propsValue=defineProps({
    title:{
        type:String,
        default:"示例"
    },
    date:{
        type:String || Date,
        default(){
            return new Date();
        }
    }
});


/*
    计算属性等代码区域
*/
const getDate=computed(()=>{
    return Qilin.Date.formatDate(propsValue.date,"chinese");
});


/*
    逻辑脚本代码区域
*/


/*
    生命周期代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-QilinExplain{
    >.qilin-QilinExplain-header{
        font-size:$size-text-medium;
        font-weight:bolder;
        border-bottom:1px solid $color-border;
    }
    >.qilin-QilinExplain-footer{
        border-top:1px solid $color-border;
        color:$color-text-support;
    }
}
</style>
